<template>
	<view>
		<view class="search-box">
			<image src="/static/left.png" @click="onBack()"></image>
			<view class="input-box">
				<up-search placeholder="搜索您想要的内容" v-model="searchValue" :clearabled="true"></up-search>
				
				<!-- <input v-model="searchValue" type="text" placeholder="搜索" placeholder-class="placeholder" @input="onSearch"> -->
				<!-- <image src="../static/scan.png" mode=""></image> -->
			</view>
			<!-- #ifndef MP-WEIXIN  -->
			<text>搜索</text>
			<!-- #endif -->
		</view>
		<view class="content" v-if="historyList && historyList.length>0">
			<view class="title">
				<text>历史搜索</text>
				<view class="clear-box" @click="historyList.length=0">
					<image src="/static/del.png" mode=""></image>
					<text>清空</text>
				</view>
			</view>
			<view class="child">
				<view class="item" v-for="(item, index) in historyList" :key="index">
					<text>{{item}}</text>
				</view>
			</view>
		</view>

		<!-- <view class="content">
			<view class="title">
				<text>热门搜索</text>
			</view>
			<view class="child">
				<view class="item" :class="item.type == 2 ? 'item-a' :''" v-for="(item, index) in hotList" :key="index">
					<image v-if="item.img" :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view> -->

		<view class="content" v-if="list.length>0">
			<view class="title">
				<text>搜索结果</text>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="cover-box">
						<view class="label" :class="'label-'+ index">
							<text>{{index}}</text>
						</view>
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-info-box">
						<text>{{item.serviceName}}</text>
						<view>
							<image :src="index > 2 ?'../static/huo_.png':'../static/huo.png'" mode=""></image>
							<text :style="index > 2 ? 'color:#B1B1B1':''">{{item.number}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="empty">
			<up-empty v-if="list.length==0" mode="search">
			</up-empty>
		</view>
	</view>
</template>

<script>
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		serviceHomeApi
	} from '@/api/service.js'
	import {
		debounce
	} from '@/utils/utils.js'
	import {
		useStore
	} from '@/store/index.js'
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				searchValue: '',
				historyList: computed(() => store.userInfo.searchHistory),
				list: [],
				tops: 0

			})
			onLoad((option) => {


			})

			const onSearch = () => {

				const loadOptions = async () => {
					const {
						data
					} = await serviceHomeApi({
						search: state.searchValue,
					})
					store.addSearchHistory(state.searchValue)
					state.list = data
				};

				debounce(loadOptions, 2000);


			}
			const goPage = (item) => {
				uni.navigateTo({
					url: item.url
				})
			}
			const onBack = () => {

				uni.reLaunch({
					url: '/pages/index/index'
				})

			}
			return {
				...toRefs(state),
				onSearch,
				onBack,
				goPage,
			}
		}

	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	

	.search-box {
		padding-top:88rpx;
		padding-bottom:18rpx;
		position: fixed;
		background: #fff;
		top:0px;
		left: 0;
		z-index: 10;
		width: 100%;
		display: flex;
		/*  #ifndef MP-WEIXIN  */
		justify-content: space-between;
		/* #endif */
		align-items: center;
		margin: 0 24rpx;
		height: 88rpx;
	}

	.search-box image {
		width: 50rpx;
		height: 50rpx;
		flex-shrink: 0;
	}


	.search-box>text {
		flex-shrink: 0;
		color: #999;
	}

	.input-box {
		display: flex;
		align-items: center;
		background: #fff;
		height: 72rpx;
		border-radius: 72rpx;

		/*  #ifndef MP-WEIXIN  */
		width: 100%;
		/* #endif */
		margin: 0 24rpx;
	}

	.input-box input {
		font-size: 30rpx;
		width: 100%;
	}

	.input-box .placeholder {
		color: #c6c6c6;
	}


	.input-box image {
		width: 48rpx;
		height: 48rpx;
	}

	.content {
		margin: 24rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 24rpx 0;
	}

	.title>text {
		font-size: 30rpx;
		font-weight: bold;
	}

	.clear-box {
		color: #868686;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.clear-box image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 2rpx;
	}

	.child {
		display: flex;
		flex-wrap: wrap;
	}

	.child .item {
		background: #fff;
		font-size: 28rpx;
		height: 62rpx;
		border-radius: 54rpx;
		padding: 0 28rpx;
		color: #525252;
		margin: 0 24rpx 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.child .item-a {
		padding: 0 28rpx 0 14rpx;
	}

	.child .item image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		margin-right: 10rpx;
	}

	.list {
		margin-top: 160rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 15rpx 30rpx;
	}

	.list .item {
		display: flex;
		padding: 15rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 10rpx;
	}

	.item-info-box {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		color: #333333;

	}

	.item-info-box>text {
		-webkit-text-stroke-width: 0.1px;
		font-size: 30rpx;
	}

	.item-info-box>view {
		color: #FF4466;
		-webkit-text-stroke-width: 0.3px;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.item-info-box>view image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 4rpx;
	}

	.cover-box {
		position: relative;
	}

	.cover-box .label {
		position: absolute;
		top: 0;
		left: 0;
		width: 44rpx;
		height: 44rpx;
		z-index: 1;
		border-top-left-radius: 14rpx;
		border-bottom-right-radius: 14rpx;
		text-align: center;
		line-height: 44rpx;
		color: #fff;
		font-size: 28rpx;
		-webkit-text-stroke-width: 0.1px;
	}

	.label-0 {
		background: #E05345;
	}

	.label-1 {
		background: #EB9941;
	}

	.label-2 {
		background: #EDC744;
	}

	.label-3 {
		background: #696765;
	}

	.cover-box image {
		width: 120rpx;
		height: 120rpx;
		flex-shrink: 0;
		border-radius: 14rpx;
		margin-right: 30rpx;
	}

	.empty {
		height: 800rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>